<template>
    <div class="app-container">
        <!-- el-input一个普通的输入项，用于检索 -->
        <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

        <!-- 下面的树形结构
             ref属性也就是唯一标识，:data表示你要显示的数据
            :props 表示取到节点或则子节点的名称
            :filter-node-method是输入框里面的检索功能
        -->
        <el-tree ref="tree2" :data="data2" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree"
            default-expand-all />

    </div>
</template>
  
<script>
import subject from '@/api/edu/subject'

export default {

    data() {
        return {
            filterText: '',

            // 我们要按照这种格式对数据进行返回
            data2: [],//返回的是所有分类的数据

            defaultProps: {
                children: 'children',
                label: 'title'  //取数据分类的key的名称的名字
            }
        }
    },

    created() {
        // this指的是当前页面的方法属性
        this.getAllSubjectList();
    },

    watch: {
        filterText(val) {
            this.$refs.tree2.filter(val)
        }
    },

    methods: {
        // 检索功能
        filterNode(value, data) {
            if (!value) return true
            // toLowerCase()表示不区分大小写
            return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
        },
        getAllSubjectList() {
            subject.getSubjectList().then(response => {
                this.data2 = response.data.list;
            })
        },
    }

}
</script> 
  
  